<template>
  <div class="bar_wrap">
    <tab-bar-item class="item" link="/home">
      <span class="home"></span>
      <p>首页</p>
    </tab-bar-item>
    <tab-bar-item class="item" link="/resume">
      <span class="resume"></span>
      <p>简历</p>
    </tab-bar-item>
    <tab-bar-item class="item" link="/vocation/vocation">
      <span class="zy"></span>
      <p>职位</p>
    </tab-bar-item>
    <tab-bar-item class="item" link="/person/user">
      <span class="user"></span>
      <p>我的</p>
    </tab-bar-item>
  </div>
</template>

<script>
import tabBarItem from "base/tabBar/tabBarItem";
export default {
  data() {
    return {};
  },
  components: { tabBarItem },
  methods: {}
};
</script>

<style lang="scss" scoped>
@import "~common/scss/var.scss";
.bar_wrap {
  background: #ffffff;
  display: flex;
  width: 100vw;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 2px solid #ebebeb;
  box-shadow: 2px 0px 5px #dbdbdb;
  .item {
    flex: 1;
    text-align: center;
    box-sizing: border-box;
    padding: $font-size-mini 0;
    font-size: $font-size-large;
    position: relative;
    color: $color-white;
    transition: $transition;
  }
  span {
    display: inline-block;
    height: $radius-base4;
    width: $radius-base4;
    margin-bottom: $padding-base-half;
  }
  p {
    color: #4d4d4d;
    font-size: 28px;
  }
  .home {
    background: url("~common/images/tabBar/home.png") 0 0 no-repeat;
    background-size: 40px;
  }
  .resume {
    background: url("~common/images/tabBar/resume.png") 0 0 no-repeat;
    background-size: 40px;
  }
  .zy {
    background: url("~common/images/tabBar/zy.png") 0 0 no-repeat;
    background-size: 40px;
  }
  .user {
    background: url("~common/images/tabBar/user.png") 0 0 no-repeat;
    background-size: 40px;
  }
  .active {
    p {
      color: #1d66d4;
    }
    .home {
      background: url("~common/images/tabBar/home_.png") 0 0 no-repeat;
      background-size: 40px;
    }
    .resume {
      background: url("~common/images/tabBar/resume_.png") 0 0 no-repeat;
      background-size: 40px;
    }
    .zy {
      background: url("~common/images/tabBar/zy_.png") 0 0 no-repeat;
      background-size: 40px;
    }
    .user {
      background: url("~common/images/tabBar/user_.png") 0 0 no-repeat;
      background-size: 40px;
    }
  }
}
</style>
